<template>
    <div class="kongjian">
        <div class="kongjian1" style="text-align: center;">
          <div class="conent">
          
          <van-icon name="like" color="red" size="45px"/>
        </div>
        <div class="a1">我喜欢</div>
        </div>
        <div class="kongjian2">
            <div class="conent1">
            <van-icon name="notes-o" color="red" size="45px" />
        </div>
        <div class="a2"> 最近</div>
        </div>
        <div class="kongjian3">
            <div class="conent2">
                <van-icon name="service" color="red" size="45px" />
            </div>
            <div class="a3">音频</div>
            
        </div>
        <div class="kongjian4">
            <div class="conent3">

                <van-icon name="wap-nav" color="red" size="45px" />
            </div>
            <div class="a4"> 全部</div>
           
        </div>
    </div>
</template>
<script setup>

</script>
<style scoped>
.kongjian1,
.kongjian2,
.kongjian3,
.kongjian4
{
    width: 80px;
    height: 85px;
    background-color: rgba(255, 192, 203, 0.9);
    border-radius: 0.5cm;
}
.kongjian1 .conent,
.kongjian2 .conent1,
.kongjian3 .conent2,
.kongjian4 .conent3
{
    display: flex;
    justify-content: center;
    align-items: center;
}
.a1
{
    margin-top: 7px;
}
.a2{
    margin-left: 25px;
    margin-top: 7px;
}
.a3{
    margin-top: 7px;
    margin-left: 25px;
}
.a4{
    margin-top: 7px;
    margin-left: 23px;
}
.kongjian{
    display: flex;
    justify-content: space-around
}
</style>